<template>
  <div class="text-input-field-render" :class="getIndentClass(fieldData.alignment)" :style="{ fontSize: getFontSize() }">
    <!-- 字段名称 -->
    <div class="field-name-container">
      <span v-if="fieldData.prefixSymbol && fieldData.prefixSymbol !== 'none'" class="prefix-symbol">
        {{ getPrefixSymbol() }}
      </span>
      <span v-if="fieldData.fieldName" class="field-name-text" :class="{ 'bold-text': fieldData.isBold }">
        {{ fieldData.fieldName }}
      </span>
    </div>
    
    <!-- 文本输入格式显示 -->
    <div class="text-input-display">
      <div class="input-segments">
        <template v-for="(segment, index) in inputSegments" :key="index">
          <!-- 数字段 -->
          <div v-if="segment.type === 'digit'" class="digit-segment">
            <div class="digit-placeholder"></div>
          </div>
          <!-- 小数点 -->
          <div v-else-if="segment.type === 'decimal'" class="decimal-segment">
            <span class="decimal-point">.</span>
          </div>
        </template>
      </div>

      <!-- 后缀显示 -->
      <div v-if="fieldData.suffix" class="suffix-display">
        <span class="suffix-text">{{ fieldData.suffix }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  fieldData: {
    type: Object,
    required: true,
    default: () => ({
      value: '',
      fieldName: '',
      fieldFormat: '3.1',
      alignment: 'indent-0',
      prefixSymbol: '',
      isBold: false
    })
  }
})
// 字体映射
const getFontSize = () => {
  const map = { '小二': '18pt', '小四': '12pt', '五号': '10.5pt', '小五': '9pt' }
  return map[props.fieldData.fontSize] || '10.5pt'
}

// 解析字段格式
const inputSegments = computed(() => {
  const format = props.fieldData.fieldFormat || '3.1'
  const segments = []
  
  // 解析格式，例如 "3.1" -> 3个数字位 + 小数点 + 1个小数位
  if (format.includes('.')) {
    const [integerPart, decimalPart] = format.split('.')
    const integerDigits = parseInt(integerPart) || 0
    const decimalDigits = parseInt(decimalPart) || 0
    
    // 添加整数位
    for (let i = 0; i < integerDigits; i++) {
      segments.push({ type: 'digit' })
    }
    
    // 添加小数点
    if (decimalDigits > 0) {
      segments.push({ type: 'decimal' })
    }
    
    // 添加小数位
    for (let i = 0; i < decimalDigits; i++) {
      segments.push({ type: 'digit' })
    }
  } else {
    // 只有整数位
    const digits = parseInt(format) || 0
    for (let i = 0; i < digits; i++) {
      segments.push({ type: 'digit' })
    }
  }
  
  return segments
})

// 获取缩进类
const getIndentClass = (alignment) => {
  const indentMap = {
    'indent-0': 'indent-0',
    'indent-1': 'indent-1',
    'indent-2': 'indent-2',
    'indent-3': 'indent-3',
    'indent-4': 'indent-4',
    'indent-5': 'indent-5'
  }
  return indentMap[alignment] || 'indent-0'
}

// 获取前缀符号
const getPrefixSymbol = () => {
  const symbolMap = {
    'dot_circle': '⏺',
    'star': '✧',
    'pointer': '☞',
    'arrow_curved': '⮚',
    'square': '⯀'
  }
  return symbolMap[props.fieldData.prefixSymbol] || ''
}
</script>

<style lang="scss" scoped>
@import '@/assets/common-styles.scss';

.text-input-field-render {
  font-family: '宋体', SimSun, serif;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
  
  .text-input-display {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    
    .input-segments {
      display: flex;
      align-items: center;
      gap: 0;
      border: none;
      border-radius: 0;
      padding: 0;
      height: 20px;

      .digit-segment {
        position: relative;
        margin-right: 0;

        .digit-placeholder {
          width: 30px;
          height: 18px;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          border-bottom: 1px solid #9b9191;
          border-left: 1px solid #9b9191;
          border-right: 1px solid #9b9191;
          box-sizing: border-box;
        }
      }

      .digit-segment + .digit-segment {
        margin-left: -1px;
      }

      .decimal-segment {
        margin: 0;
        padding: 0 4px;
        display: flex;
        align-items: center;
        position: relative;

        .decimal-point {
          font-size: 12px;
          font-weight: normal;
          color: #000;
          line-height: 1;
        }
      }
    }

    .suffix-display {
      .suffix-text {
        font-family: '宋体', SimSun, serif;
        font-size: inherit;
        line-height: 1.5;
      }
    }
  }
}
</style> 